<template>
  <div>
    <div class="search" ref="searchDom">
      <i class="iconfont icon-return" @click="back"></i>
      <div class="input">
        <input ref="searchInput" id="searchInput" type="text" @click="focus" @blur="blur" @keyup="showClean">
        <label ref="searchLabel" for="searchInput"><i class="iconfont icon-search"></i>搜索商家</label>
        <div class="clean" ref="searchClean" @click="clean">
          <i class="iconfont icon-close2"></i>
        </div>
      </div>
    </div>
    <div class="gap"></div>
    <template v-if="showHistory">
      <div class="history">
        <section class="title">
          <h2 class="left-cursor">
            搜索历史
            <i class="iconfont icon-shanchu right" @click="cleanHistory"></i>
          </h2>
        </section>
        <div class="lists" @click="historyToSearch">
          <ul>
            <li class="hairlines-top" v-for="(data, index) in history" :key="index">
              <i class="iconfont icon-search2 left"></i>{{data}}<i class="iconfont icon-zhuan right"></i>
            </li>
          </ul>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="business" ref="infiniteBox">
        <section class="title">
          <h2 class="left-cursor hairlines-bottom">
            全部商家
          </h2>
        </section>
        <business-lists :datas="businessLists" :isLoading="isLoading" :end="isEnd"></business-lists>
        <p class="none-tips" v-if="isNone">抱歉, 没有您要找的商家</p>
      </div>
    </template>
  </div>
</template>
<script>
  import $ from 'edom'
  import BusinessLists from '@/components/business-lists/lists'
  export default {
    name: 'Server',
    components: {
      'business-lists': BusinessLists
    },
    data () {
      return {
        title: '搜索',
        activeIndex: 1,
        showHistory: true,
        history: [],
        page: 1,
        maxPage: 1,
        busy: false,
        isLoading: false,
        isEnd: false,
        isNone: false,
        searchText: '',
        businessLists: []
      }
    },
    methods: {
      back: function () {
        this.$router.go(-1)
      },
      focus: function () {
        let searchDom = this.$refs.searchDom
        let label = this.$refs.searchLabel
        label.style.display = 'none'
        searchDom.style.position = 'absolute'
      },
      blur: function () {
        let searchDom = this.$refs.searchDom
        searchDom.style.position = 'fixed'
      },
      showClean: function (event) {
        let keyCode = event.keyCode
        let input = this.$refs.searchInput
        let clean = this.$refs.searchClean
        let value = input.value
        let len = value.length
        if (keyCode === 13) {
          this.searchText = value
          this.showHistory = false
          this.getBusinessLists()
          input.blur()
          /* 写入cookie */
          $().addCookies('search', value, 30)
        }
        if (len > 0) clean.style.display = 'block'
        else clean.style.display = 'none'
      },
      clean: function () {
        let input = this.$refs.searchInput
        let clean = this.$refs.searchClean
        input.value = ''
        clean.style.display = 'none'
      },
      cleanHistory: function () {
        $().delCookies('search')
        this.history = []
      },
      historyToSearch: function (event) {
        let target = event.target
        let text = $(target).closest('li')[0].innerText
        this.searchText = text
        this.showHistory = false
        this.getBusinessLists()
      },
      getBusinessLists () {
        if (this.page > this.maxPage) {
          window.removeEventListener('scroll', this.scrollEvent)
          this.isEnd = true
          return
        }
        this.isLoading = true
        this.axios.post('/api/service/search', {
          page: this.page,
          lng: this.$store.state.lng,
          lat: this.$store.state.lat,
          keyword: this.searchText
        })
        .then((res) => {
          let data = res.data
          this.maxPage = data.max_page
          if (!data.service_list) {
            this.businessLists = []
            this.isNone = true
          } else {
            this.isNone = false
            this.businessLists = this.businessLists.concat(data.service_list)
          }
          this.page++
          this.$nextTick(() => {
            this.isLoading = false
            this.busy = false
          })
        })
      },
      InfiniteScroll (ele) {
        this.wHeight = window.innerHeight
        this.scrollHeight = ele.offsetHeight
        this.scrollTop = 0
        this.distance = 10
        window.addEventListener('scroll', this.scrollEvent)
      },
      scrollEvent () {
        let scrollTop = document.body.scrollTop
        if (scrollTop + this.wHeight + this.distance > this.scrollHeight && !this.busy) {
          this.busy = true
          this.getBusinessLists()
        }
      }
    },
    created () {
      this.setTitle(this.title)
      let cookies = $().getCookies('search')
      if (cookies) {
        let set = new Set(cookies.split('&'))
        this.history = [...set]
      }
    },
    updated () {
      if (this.page === 2) {
        this.$nextTick(() => {
          this.InfiniteScroll(this.$refs.infiniteBox)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .search{
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    background: #72a5ef;
    padding: rem(20) rem(24);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-return{
      font-size: rem(36);
      color: #fff;
    }
    .input{
      flex: 1;
      position: relative;
      text-align: center;
      font-size: rem(24);
      .clean{
        display: none;
        position: absolute;
        top: 0;
        right: 10%;
        height: rem(60);
        line-height: rem(60);
        width: rem(50);
        text-align: center;
        .iconfont{
          font-size: rem(20);
          color: #999;
        }
      }
    }
    input{
      display: block;
      margin: 0 auto;
      padding: 0 rem(15);
      width: 80%;
      height: rem(60);
      border-radius: 4px;
      font-size: rem(24);
      color: #333;
    }
    label{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: rem(60);
      line-height: rem(60);
      color: #999;
      .iconfont{
        margin-right: rem(10);
        font-size: rem(26);
      }
    }
    input:focus + label{
      opacity: 0;
    }
  }
  .history,.business{
    .title{
      padding: 0 rem(24);
      background: #fff;
    }
    .title h2{
      height: rem(80);
      line-height: rem(80);
      font-size: rem(30);
      color: #999;
      .iconfont{
        float: right;
        color: #999;
        font-size: rem(30);
      }
    }
  }
  .history .lists{
    background: #fff;
    padding: 0 rem(24);
    li{
      height: rem(80);
      line-height: rem(80);
      font-size: rem(28);
      color: #333;
      .left{
        margin-right: rem(20);
        font-size: rem(30);
        color: #bfbfbf;
        font-weight: bold;
      }
      .right{
        float: right;
        color: #999;
        font-size: rem(26);
        font-weight: bold;
      }
    }
  }
  .gap{
    height: rem(100);
  }
  .none-tips{
    font-size: 0.4rem;
    color: #999;
    text-align: center;
  }
</style>
